<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ZhuaBa-Forget</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="../static/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="../static/assets/css/app.css" type="text/css">
    <!-- end::custom styles -->
    <script type="text/javascript">
        function getForget(){
            $.ajax({
                type: "post",
                url : "http://localhost:8080/" + "/forgetPassword",
                dataType:'json',
                data: {
                    "Username": document.getElementById("Username").value,
                    "Email": document.getElementById("Email").value,
                    "Password": document.getElementById("Password").value,
                    "Code": document.getElementById("Code").value,
                },
                success: function(data){
                    var amount = data.data;
                    //取出总人数
                    var forget1 = amount.forget1;
                    var logMessage = data.message;
                    if(forget1==1){
                        alert("更改成功！");
                        window.location.href="/"
                    }
                    else if(forget1==2){
                        alert("密码与原密码一致！")
                    }
                    else if(forget1==3){
                        alert("验证码错误！")
                    }
                    else{
                        alert("更改失败！")
                    }
                }
            });
        }
        function getCode(){
            $.ajax({
                type: "post",
                url : "http://localhost:8080/" + "/getCode",
                dataType:'json',
                data: {
                    "Username": document.getElementById("Username").value,
                    "Email": document.getElementById("Email").value,
                    "Password": document.getElementById("Password").value,
                },
                success: function(){

                }
            });
        }
        Email.onchange = function(){
            var email = this.value;
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(reg.test(email)){
                alert("邮箱格式正确");
            }else{
                alert("邮箱格式不正确");
            }
        }
    </script>
</head>
<body class="bg-white h-100-vh p-t-0" >

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->

<div class="p-b-50 d-block d-lg-none"></div>

<div class="container h-100-vh">
    <div class="row align-items-md-center h-100-vh">
        <div class="col-lg-6 d-none d-lg-block">
            <img class="img-fluid" src="../static/assets/media/svg/login.svg" alt="...">
        </div>
        <div class="col-lg-4 offset-lg-1">
            <div class="d-flex align-items-center m-b-20">
                <img src="../static/assets/media/image/dark-logo.png" class="m-r-15" width="40" alt="">
                <h3 class="m-0">ZhuaBa-Forget</h3>
            </div>
            <p th:text="#{login.forgetpassword}">Enter relevant information and new password.</p>
                <div class="form-group mb-4">
                    <input type="text" class="form-control form-control-lg" id="Email" name="Email" th:placeholder="#{login.email}" autofocus placeholder="Email">
                </div>
                <div class="form-group mb-4">
                    <input type="text" class="form-control form-control-lg" id="Username" name="Username" th:placeholder="#{login.username}" autofocus placeholder="Username">
                </div>
                <div class="form-group mb-4">
                    <input type="password" class="form-control form-control-lg" id="Password" name="Password" th:placeholder="#{login.password}" placeholder="Password">
                </div>
            <div class="form-group mb-4">
                <input type="text" class="form-control form-control-lg" id="Code" name="Code" th:placeholder="#{login.code}" placeholder="VerificationCode">
                <p onclick="getCode()">获取验证码</p>
            </div>
                <button class="btn btn-primary btn-lg btn-block btn-uppercase mb-4" onclick="getForget()" type="submit" th:text="#{login.retrieve}">Retrieve</button>
        </div>
    </div>
</div>

<!-- begin::global scripts -->
<script src="../static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::custom scripts -->
<script src="../static/assets/js/app.js"></script>
<!-- end::custom scripts -->

</body>
</html>